<template>
	<view>
		<header-common title="话题" :iconShow="false"></header-common>

		<!-- 话题导航 -->
		<view class="nav">
			<swiper class="swiper" :indicator-dots="false" indicator-active-color="#63D6ED">
				<swiper-item >
					<view class="list-nav">
						<view class="item" @click="navTo(`/pages/SearchPage/SearchPage?id=${rs.id}`)"  v-for="rs in navData" :key="rs.id">
							<view class="item_img">
								<image style="width: 100%; height: 100%;" :src="rs.url" mode=""></image>
							</view>
							<view class="item_name2">{{rs.title}}</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 列表展示主题,下拉加载更多 -->
		<view class="theme-box">
			<view class="theme" v-for="rs in list" :key="rs.id">
				<view class="card-title1">
					# {{rs.title}}
				</view>
				
				<myList :list="rs.list"></myList>
				
			</view>
			
		</view>



		<tabbar :index="1"></tabbar>
	</view>
</template>

<script>
	import {
		theme_items
	} from "@/api/axios.js"
	export default {
		data() {
			return {
				navData: [{
						id: 1,
						title: "游戏",
						url: "https://image.szcits.cn/Public/App/image/nav-index (23).png"
					},
					{
						id: 2,
						title: "新闻",
						url: "https://image.szcits.cn/Public/App/image/nav-index (23).png"
					},
					{
						id: 3,
						title: "视频",
						url: "https://image.szcits.cn/Public/App/image/nav-index (23).png"
					},
					{
						id: 4,
						title: "音乐",
						url: "https://image.szcits.cn/Public/App/image/nav-index (23).png"
					},
					{
						id: 5,
						title: "社交",
						url: "https://image.szcits.cn/Public/App/image/nav-index (23).png"
					},
					{
						id: 6,
						title: "购物",
						url: "https://image.szcits.cn/Public/App/image/nav-index (23).png"
					},
					{
						id: 7,
						title: "工具",
						url: "https://image.szcits.cn/Public/App/image/nav-index (23).png"
					},
					{
						id: 8,
						title: "教育",
						url: "https://image.szcits.cn/Public/App/image/nav-index (23).png"
					},
					{
						id: 9,
						title: "生活",
						url: "https://image.szcits.cn/Public/App/image/nav-index (23).png"
					},
					{
						id: 10,
						title: "健康",
						url: "https://image.szcits.cn/Public/App/image/nav-index (23).png"
					}
				],
				list:[],
				page:1
			}
		},
		onLoad() {
this.getTheme();
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			// 目的地-国内/国外
			// async getTheme(){
			// 	// 请求
				
			// 	this.list = [{id:1,title:'游戏',data:[
					
			// 	]}]
			// }
			
			async getTheme() {
				let res = await theme_items({
					page: this.page,
				})
			
				this.list = [...this.list, ...res]
			
				// if (res.data != null && res.data.length > 0) {
				// 	this.page++;
				// 	for (var i = 0; i < res.data.length; i++) {
				// 		this.list.push(res.data[i])
				// 	}
				// }
			},
		},
		// 触底加载列表
		async onReachBottom() {
			uni.showLoading({
				title: '加载中'
			});
			await this.getTheme();
			uni.hideLoading();
		},
	}
</script>

<style scoped lang="scss">
	.nav {
		height: 320rpx;
		// height: 160rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		padding: 28rpx 24rpx;
		box-sizing: border-box;

		.list-nav {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
		}

		.item {
			width: 128rpx;
			height: 128rpx;
			text-align: center;
			border-radius: 28rpx;
			border-right-color: #000;
			margin-bottom: 24rpx;

			.item_nav_img {
				width: 56rpx;
				height: 56rpx;
				margin: auto;
				padding-top: 16rpx;
			}

			.item_img {
				width: 56rpx;
				height: 56rpx;
				margin: auto;
			}

			.item_name {
				position: absolute;
				bottom: 6rpx;
				z-index: 1;
				width: 100%;
				text-align: center;
				height: 40rpx;
				line-height: 40rpx;
				font-size: 24rpx;
				letter-spacing: 2rpx;
				color: #FFFFFF;
			}
			.item_name2 {
				padding-top: 10rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #000;
				line-height: 30rpx;
			}
		}
	}
	
	.theme-box{
		.card-title1{
			font-size: 20px;
			font-weight: bold;
			padding: 12rpx 24rpx;
			background-color: #f9f9f9;
			margin-top: 12rpx;
		}
		
	}

</style>